<div>
    <div class="container">
        <a href="#" data-activates="nav-mobile" class="button-collapse top-nav waves-effect waves-light circle hide-on-large-only"><i class="material-icons">menu</i></a></div>
    <ul id="nav-mobile" class="side-nav fixed">
        <li class="logo">
            <a id="logo-container" href="index.html" class="brand-logo waves-effect waves-light btn pink darken-1">
                <i class="material-icons left">polymer</i>控制面板
            </a>

        </li>
        <li class="bold ">
            <!--<a href="/about.html" class="waves-effect waves-teal">关于我们</a>-->
            <router-link to="/foo/3" class="waves-effect waves-teal">关于我们</router-link>

        </li>
        <li class="bold ">
            <!--<a href="/getting-started.html" class="waves-effect waves-teal"></a>-->
            <router-link to="/bar/4" class="waves-effect waves-teal">开始学习</router-link>
        </li>
        <li class="bold ">
            <!--<a  @click="pushss()" class="waves-effect waves-teal">router</a>-->
            <!--<router-link :to='map(e("name", "/bar"),map(e("params",map(e("id","123")))))'>User</router-link>-->
            <a v-on:click='say("what")'>Say what</a>

        </li>
        <li class="no-padding">
            <ul class="collapsible collapsible-accordion">
                <li class="bold active"><a class="collapsible-header active waves-effect waves-teal">CSS</a>
                    <div class="collapsible-body">
                        <ul>
                            <li class=''><a href="/color.html">颜色</a></li>
                            <li class=''><a href="/grid.html">网格</a></li>
                            <li class=''><a href="/helpers.html">助手</a></li>
                            <li class=''><a href="/media-css.html">媒体</a></li>
                            <li class=''><a href="/sass.html">Sass</a></li>
                            <li class='active'><a href="/shadow.html">阴影效果</a></li>
                            <li class=''><a href="/table.html">表格</a></li>
                            <li class=''><a href="/typography.html">字体样式</a></li>
                        </ul>
                    </div>
                </li>
                <li class="bold "><a class="collapsible-header   waves-effect waves-teal">组件</a>
                    <div class="collapsible-body">
                        <ul>
                            <li class=''><a href="/badges.html">徽章</a></li>
                            <li class=''><a href="/buttons.html">按钮</a></li>
                            <li class=''><a href="/breadcrumbs.html">路径导航</a></li>
                            <li class=''><a href="/cards.html">卡片</a></li>
                            <li class=''><a href="/chips.html">信息块</a></li>
                            <li class=''><a href="/collections.html">集合</a></li>
                            <li class=''><a href="/footer.html">页脚</a></li>
                            <li class=''><a href="/forms.html">表单</a></li>
                            <li class=''><a href="/icons.html">图标</a></li>
                            <li class=''><a href="/navbar.html">导航条</a></li>
                            <li class=''><a href="/pagination.html">分页组件</a></li>
                            <li class=''><a href="/preloader.html">预加载组件</a></li>
                        </ul>
                    </div>
                </li>
                <li class="bold "><a class="collapsible-header  waves-effect waves-teal">JavaScript</a>
                    <div class="collapsible-body">
                        <ul>
                            <li class=''><a href="/carousel.html">轮播组件</a></li>
                            <li class=''><a href="/collapsible.html">折叠</a></li>
                            <li class=''><a href="/dialogs.html">对话框</a></li>
                            <li class=''><a href="/dropdown.html">下拉列表</a></li>
                            <li class=''><a href="/media.html">媒体</a></li>
                            <li class=''><a href="/modals.html">模态</a></li>
                            <li class=''><a href="/parallax.html">视差</a></li>
                            <li class=''><a href="/pushpin.html">图钉</a></li>
                            <li class=''><a href="/scrollfire.html">滚动显示</a></li>
                            <li class=''><a href="/scrollspy.html">滚动监听</a></li>
                            <li class=''><a href="/side-nav.html">侧边导航</a></li>
                            <li class=''><a href="/tabs.html">标签</a></li>
                            <li class=''><a href="/transitions.html">透明</a></li>
                            <li class=''><a href="/waves.html">波纹效果</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </li>
        <li class="bold "><a href="/mobile.html" class="waves-effect  waves-teal">手机</a></li>
        <li class="bold "><a href="/showcase.html" class="waves-effect  waves-teal">案例展示</a></li>
    </ul>
</div>
